<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TODO supply a title</title>
    </head>
    <body>
        <div>
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                            xmlns:ui="http://java.sun.com/jsf/facelets"
                            xmlns:h="http://java.sun.com/jsf/html"
                            xmlns:f="http://java.sun.com/jsf/core"
                            xmlns:a4j="http://richfaces.org/a4j"
                            xmlns:rich="http://richfaces.org/rich"
                            xmlns:fn="http://java.sun.com/jsp/jstl/functions">
                <style type="text/css">
                    input[type = 'submit']{
                        margin:3px 0px 3px 10px;
                        padding:3px 5px 3px 5px;
                    }
                    .active-row {
                        background-color: #FFEBDA !important;
                        cursor: pointer;
                    }
                </style>
                <h:form id="acctform">
                    <rich:panel header="R9支出数据配置" styleClass="content-hight">
                        <rich:toolbar>
                            <rich:toolbarGroup> 
                                <a4j:commandButton value="确定" action="#{finDataInterfaceBean.save}"
                                                   onclick="this.disabled = 'true'"
                                                   render="@this,editArea"/>
                                <a4j:commandButton value="取消"/>
                            </rich:toolbarGroup>
                        </rich:toolbar>
                        <h:panelGrid columns="2">
                            <h:outputText id="left" value="#{finDataInterfaceBean.finProj.name}" style="color: red;padding-top:10px;"/>
                            <h:outputText id="right" value="-->  #{finDataInterfaceBean.right}"
                                          title="#{finDataInterfaceBean.right}"/>
                            <h:panelGroup id="editGroup">
                                <div style="height:400px;overflow:auto;">
                                    <rich:dataTable value="#{finDataInterfaceBean.finProjModel}" var="pro"
                                                    onrowmouseover="this.style.backgroundColor='#F1F1F1'"
                                                    onrowmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                                                    rowClasses="list-row-odd,list-row-even"
                                                    styleClass="tableStyle">
                                        <f:facet name="header">R9-财务项目-支出数据配置-编制</f:facet>
                                        <rich:column style="width:100px;">
                                            <f:facet name="header">财务项目代码</f:facet>
                                            <a4j:commandLink action="#{finDataInterfaceBean.selected}"
                                                             render="left,right,editArea">
                                                <h:outputText value="#{pro.code}"/>
                                            </a4j:commandLink>
                                        </rich:column>
                                        <rich:column style="width:220px;">
                                            <f:facet name="header">财务项目名称</f:facet>
                                            <h:outputText value="#{pro.name}"/>
                                        </rich:column>
                                    </rich:dataTable>
                                </div>
                                <rich:jQuery selector=".tableStyle tr" event="click" query="jQuery(this).addClass('active-row')"/>
                                <rich:jQuery selector=".tableStyle tr" event="click" query="jQuery('.tableStyle tr').not(this).removeClass('active-row')"/>
                            </h:panelGroup>
                            <h:panelGroup id="editArea">
                                <h:inputText value="#{finDataInterfaceBean.nameFilter}"
                                             style="width:300px;margin-left: 20px;">
                                    <a4j:ajax event="blur" execute="@this" render="editArea"/>
                                </h:inputText>
                                <div style="height:400px;overflow:auto;margin-left: 20px;">
                                    <rich:dataTable id="editTable" value="#{finDataInterfaceBean.remoteProLi}" var="pro"
                                                    onrowmouseover="this.style.backgroundColor='#F1F1F1'"
                                                    onrowmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                                                    noDataLabel="无数据!"
                                                    styleClass="tableStyle">
                                        <f:facet name="header">
                                            配置明细
                                        </f:facet>
                                        <rich:column>
                                            <f:facet name="header">选择</f:facet>
                                            <h:selectBooleanCheckbox  value="#{pro.selected}" >
                                                <a4j:ajax event="click" execute="@this" render="@this,codeRow,nameRow"/>
                                            </h:selectBooleanCheckbox>
                                        </rich:column>
                                        <rich:column style="text-align: left;width:120px;">
                                            <f:facet name="header">项目支出科目代码</f:facet>
                                            <h:panelGroup id="codeRow">
                                                <h:outputText value="#{pro.code}" rendered="#{pro.selected}" style="color:green"/>
                                                <h:outputText value="#{pro.code}" rendered="#{!pro.selected}"/>
                                            </h:panelGroup>
                                        </rich:column>
                                        <rich:column style="text-align: left;width:220px;"
                                                     filterValue="#{finDataInterfaceBean.nameFilter}"
                                                     filterExpression="#{empty finDataInterfaceBean.nameFilter
                                                                         or fn:contains(pro.name,finDataInterfaceBean.nameFilter)}">
                                            <f:facet name="header">项目支出科目名称</f:facet>
                                            <h:panelGroup id="nameRow">
                                                <h:outputText value="#{pro.name}" rendered="#{pro.selected}" style="color:green"/>
                                                <h:outputText value="#{pro.name}" rendered="#{!pro.selected}"/>
                                            </h:panelGroup>
                                        </rich:column>
                                    </rich:dataTable>
                                </div>
                                <rich:jQuery selector=".tableStyle tr" event="click" query="jQuery(this).addClass('active-row')"/>
                                <rich:jQuery selector=".tableStyle tr" event="click" query="jQuery('.tableStyle tr').not(this).removeClass('active-row')"/>
                            </h:panelGroup>
                        </h:panelGrid>                            
                    </rich:panel>
                </h:form>
            </ui:composition>
        </div>
    </body>
</html>
